import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';

 import { HomeH1 } from "./Home"









function Login(props) {

  const onFinish = (values) => {

    console.log('Success:', values);
    // console.log('props:', props);
    // console.log('this.username:',  this.username);
    // console.log('this.password:',  this.password);

  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };


  return (

    <div>

<Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ username: "", password: "", remember: true }}
      onFinish={onFinish}   //	提交表单且数据验证成功后回调事件
      onFinishFailed={onFinishFailed}  //	提交表单且数据验证失败后回调事件
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>


     <HomeH1 vlaue="home页" to='/home'></HomeH1>
     <HomeH1 vlaue='详情页' to='/details'></HomeH1>
    
   
    </div>

   


  










  )


}


export default Login;